/*
 * @Author: Bable znz980@qq.com
 * @Date: 2022-07-13 10:32:27
 * @LastEditors: Bable znz980@qq.com
 * @LastEditTime: 2022-07-25 16:57:32
 * @FilePath: /circulation-web/src/components/CustomListPage.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import * as React from "react";
import { Store } from "redux";
import Header from "./Header";
import Footer from "./Footer";
import CustomLists from "./CustomLists";
import { State } from "../reducers/index";
import { ListManagerContext } from "./ListManagerContext";

export interface CustomListPageProps {
  params: {
    library?: string;
    editOrCreate?: string;
    identifier?: string;
  };
  location?: { [key: string]: string | { [key: string]: string } };
}

export interface CustomListPageContext {
  editorStore: Store<State>;
  csrfToken: string;
}

/** Page that shows all lists for a library and allows creating and editing lists. */

export default function CustomListPage({
  params,
  location,
}: CustomListPageProps) {
  const { editorStore, csrfToken } = React.useContext<CustomListPageContext>(
    ListManagerContext
  );
  const { library, editOrCreate, identifier } = params;

  const headbar_color = localStorage.getItem("APP_CONFIG_ENV_HEADBAR_COLOR");

  let startingTitle;
  if (location && location.state) {
    startingTitle = (location.state as { [key: string]: string }).bookTitle;
  }
  // 使用 useEffect 钩子
  React.useEffect(() => {
    // 在组件挂载时执行的操作
    document.title = "HKPL MOBEBR";

    console.log(headbar_color, "myLocalStorageValue");

    document.documentElement.style.setProperty(
      "--my-scss-variable",
      headbar_color
    );
    // 创建 link 元素
    const linkElement = document.createElement("link");

    // 设置 link 元素的属性
    linkElement.rel = "icon";
    linkElement.href = "/mobebr-api/admin/static/admin-react/favicon.ico";
    // 如果有需要清理的操作，可以在返回的函数中处理
    return () => {
      // 在组件卸载时执行的操作
    };
  }, []); // 空数组表示仅在挂载和卸载时执行

  return (
    <div className="custom-list-page">
      <Header libraryProp={library} />
      <CustomLists
        library={library}
        editOrCreate={editOrCreate}
        identifier={identifier}
        store={editorStore}
        csrfToken={csrfToken}
        startingTitle={startingTitle}
      />
      <Footer />
    </div>
  );
}
